<!--  -->
<template>
  <div class="size-full">
    <div class="flex h-8 justify-center space-x-2">
      <ScreenButton :active="activeTab == 0" @click="switchTab(0)">交易数量</ScreenButton>
      <ScreenButton :active="activeTab == 1" @click="switchTab(1)">交易金额</ScreenButton>
      <ScreenButton :active="activeTab == 2" @click="switchTab(2)"
        ><span class="text-sm">节约资金额</span></ScreenButton
      >
    </div>
    <div style="height: calc(100% - 32px)" class="w-full" ref="ChartLeft2"></div>
    <DialogBox
      title="公共资源交易趋势"
      :show="showDialog"
      @close="
        () => {
          showDialog = false
          detailChart = null
        }
      "
    >
      <TimeSelector
        class="justify-start"
        @change="initDetail"
        :showPage="false"
        :length="5"
        :activeIndex="detailActiveLabel"
      ></TimeSelector>
      <div ref="detailChartLeft2" class="h-[522px]"></div>
    </DialogBox>
  </div>
</template>

<script setup lang="ts">
import ScreenButton from '@/components/botton/ScreenButton.vue'
import DialogBox from '@/components/box/DialogBox.vue'
import { defaultTooltipStyle, useEcharts } from '@/util/e-chart'
import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import TimeSelector from './components/TimeSelector.vue'
import { chart2DataDetail, chart2DataSum } from './components/staticDatas'
const showDialog = ref(false)

const activeTab = ref(0)

const ChartLeft2 = ref<HTMLElement>()

let mainChart: useEcharts
const initMainChart = () => {
  const Data = getMainOption(
    chart2DataSum.label[activeTab.value],
    activeTab.value == 0
      ? chart2DataSum.tradeNum
      : activeTab.value == 1
        ? chart2DataSum.turnover
        : chart2DataSum.saving
  )
  mainChart = new useEcharts(
    ChartLeft2.value!,
    Data,
    (data) => {
      console.log(data)
      detailActiveLabel.value = data.name
      detailActiveChart.value = data.seriesName
      initTable()
    },
    true
  )
}

const detailActiveLabel = ref()
const detailActiveChart = ref()
const initTable = () => {
  showDialog.value = true
}

const colorList = ['#1FA8F5', '#73FBEA', '#FF772A', '#52D98B', '#F5F953']
const getMainOption = (xAxis: string[], data: number[][]): EChartsOption => {
  const getData = (label: string, idx: number) => {
    return [
      {
        name: label,
        type: 'bar',

        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0.5, color: colorList[idx] },
              { offset: 1, color: 'transparent' }
            ],
            false
          )
        },
        data: data.map((e) => e[idx])
      }
    ]
  }
  let seriesArr: any[] = []
  xAxis.forEach((item, index) => {
    const series = getData(item, index)
    seriesArr = [...seriesArr, ...series]
  })

  return {
    color: colorList,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      ...defaultTooltipStyle
    },
    legend: {
      textStyle: {
        color: '#FFF', // 字体颜色
        fontSize: 12 // 字体大小
      },
      data: xAxis,
      itemWidth: 15
    },
    grid: {
      left: 50,
      right: 0,
      bottom: 30
    },
    xAxis: [
      {
        type: 'category',
        axisLabel: {
          color: '#FFF', // 字体颜色
          fontSize: 12, // 字体大小
          padding: [0, 0, 0, 0] // 与轴线的间距 [上, 右, 下, 左]
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        data: ['2021', '2022', '2023', '2024']
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: activeTab.value == 0 ? '交易数（个）' : '金额（亿元）',
        nameTextStyle: {
          color: '#7EB2E0', // 设置名称字体颜色
          fontSize: 14 // 设置名称字体大小
        },
        axisLabel: {
          color: '#7EB2E0', // 设置字体颜色
          fontSize: 14 // 设置字体大小
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#0A375D',
            width: 2 // 虚线宽度
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: seriesArr
  }
}
onMounted(() => {
  initMainChart()
})

const switchTab = (idx: number) => {
  activeTab.value = idx
  const Data = getMainOption(
    chart2DataSum.label[activeTab.value],
    activeTab.value == 0
      ? chart2DataSum.tradeNum
      : activeTab.value == 1
        ? chart2DataSum.turnover
        : chart2DataSum.saving
  )
  mainChart.setOption(Data)
}

//弹窗内逻辑
let detailChart: useEcharts | null
const detailChartLeft2 = ref<HTMLElement>()
const initDetail = (idx: number) => {
  let arr: number[][] = []
  if (idx == 2021) {
    arr = chart2DataDetail[0]
  } else if (idx == 2022) {
    arr = chart2DataDetail[1]
  } else if (idx == 2023) {
    arr = chart2DataDetail[2]
  } else if (idx == 2024) {
    arr = chart2DataDetail[3]
  } else {
    arr = chart2DataDetail[4]
  }
  const Data = getDetailOptions(['建设工程', '交通工程', '水利工程', '政府采购', '土地出让'], arr)
  if (detailChart) {
    detailChart.setOption(Data)
  } else {
    detailChart = new useEcharts(detailChartLeft2.value!, Data, (data) => {
      console.log(data.value)
    })
  }
}
const getDetailOptions = (legendArr: string[], data: number[][]): EChartsOption => {
  var clientWidth = detailChartLeft2.value!.clientWidth
  let xAxisArr: string[] = []
  let lineValueArr: number[][] = [[], [], [], [], []]
  for (let index = 0; index < 12; index++) {
    xAxisArr.push(index + 1 + '月')
    const sumValue =
      data[0][index] + data[1][index] + data[2][index] + data[3][index] + data[4][index]
    lineValueArr[0].push(Math.floor((data[0][index] / sumValue) * 100))
    lineValueArr[1].push(Math.floor((data[1][index] / sumValue) * 100))
    lineValueArr[2].push(Math.floor((data[2][index] / sumValue) * 100))
    lineValueArr[3].push(Math.floor((data[3][index] / sumValue) * 100))
    lineValueArr[4].push(Math.floor((data[4][index] / sumValue) * 100))
  }

  const getSelect = () => {
    const arr = legendArr
    const ans: any = {}
    arr.forEach((item) => {
      ans[item] = detailActiveChart.value == item
    })
    return ans
  }

  return {
    color: colorList,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      ...defaultTooltipStyle
    },
    legend: {
      top: 10,
      textStyle: {
        color: '#FFF', // 字体颜色
        fontSize: 12 // 字体大小
      },
      data: legendArr,
      selected: getSelect()
    },
    grid: {
      left: 50,
      right: 50,
      bottom: 30,
      top: 50
    },
    xAxis: [
      {
        type: 'category',
        axisLabel: {
          color: '#FFF', // 字体颜色
          fontSize: 12, // 字体大小
          padding: [0, 0, 0, 0] // 与轴线的间距 [上, 右, 下, 左]
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        data: xAxisArr
      },
      {
        type: 'value',
        max: clientWidth,
        show: false
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '交易数（个）',
        nameTextStyle: {
          color: '#7EB2E0', // 设置名称字体颜色
          fontSize: 14 // 设置名称字体大小
        },
        axisLabel: {
          color: '#7EB2E0', // 设置字体颜色
          fontSize: 14 // 设置字体大小
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#0A375D',
            width: 2 // 虚线宽度
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '建设工程',
        type: 'bar',
        barWidth: '12%',
        itemStyle: {
          //lenged文本
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0.5, color: colorList[0] },
              { offset: 1, color: 'transparent' }
            ],
            false
          )
        },
        data: data[0]
      },
      {
        name: '交通工程',
        type: 'bar',
        barWidth: '12%',
        itemStyle: {
          //lenged文本
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0.5, color: colorList[1] },
              { offset: 1, color: 'transparent' }
            ],
            false
          )
        },
        data: data[1]
      },
      {
        name: '水利工程',
        type: 'bar',
        barWidth: '12%',
        itemStyle: {
          //lenged文本
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0.5, color: colorList[2] },
              { offset: 1, color: 'transparent' }
            ],
            false
          )
        },
        data: data[2]
      },
      {
        name: '政府采购',
        type: 'bar',
        barWidth: '12%',
        itemStyle: {
          //lenged文本
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0.5, color: colorList[3] },
              { offset: 1, color: 'transparent' }
            ],
            false
          )
        },
        data: data[3]
      },
      {
        name: '土地出让',
        type: 'bar',
        barWidth: '12%',
        itemStyle: {
          //lenged文本
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0.5, color: colorList[4] },
              { offset: 1, color: 'transparent' }
            ],
            false
          )
        },
        data: data[4]
      }
    ]
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
</style>
